<!--
Copyright 2017 The Kubernetes Dashboard Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<kd-help-section>
  <div layout="row"
       layout-align="space-between start">
    <div flex="auto">
      <md-input-container class="md-block kd-upload-file-container"
                          md-is-error="ctrl.isFileNameError()">
        <label>[[YAML or JSON file|A 'YAML or JSON file' label, serving as placeholder for an empty file input field on the deploy page.]]</label>
        <!--TODO: Browse file on focus doesn't work in Firefox. It is to be investigated.-->
        <input ng-model="ctrl.file.name"
               ng-focus="ctrl.browseFile()"
               ng-readonly="true"
               name="fileName"
               required/>
        <ng-messages for="ctrl.form.fileName.$error"
                     role="alert"
                     multiple>
          <ng-message when="required">[[File is required.|Appears to tell the user that he/she must upload a YAML or a JSON file on the deploy page.]]</ng-message>
          </ng-message>
        </ng-messages>
      </md-input-container>
    </div>
    <md-button type="button"
               class="md-raised kd-upload-button"
               ng-click="ctrl.browseFile()">
      <label class="kd-upload-label">
        <md-icon>
          <i class="material-icons">more_horiz</i>
        </md-icon>
      </label>
    </md-button>
    <input type="file"
           class="kd-upload-file-picker"
           kd-file-reader
           ng-model="ctrl.file">
  </div>
  <kd-user-help>
    <div ng-show="ctrl.areMultipleNamespacesSelected()">
      [[Select a YAML or JSON file, specifying the resources to deploy to the namespace specified in the file.|User help for the YAML/JSON file upload form on the deploy page.]]
    </div>
    <div ng-hide="ctrl.areMultipleNamespacesSelected()">
      [[Select a YAML or JSON file, specifying the resources to deploy to the currently selected namespace (in the left side menu).|User help for the YAML/JSON file upload form on the deploy page.]]
    </div>

    <!--[[Select a YAML or JSON file, specifying the resources to deploy.|User help for the YAML/JSON file upload form on the deploy page.]]-->
    <a href="http://kubernetes.io/docs/user-guide/deploying-applications/"
       target="_blank">
      [[Learn more|The text is used as a 'Learn more' link text besides the file upload on the deploy page.]] <i class="material-icons">open_in_new</i>
    </a>
  </kd-user-help>
</kd-help-section>
